<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css" />
		<script src="../easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.serializejson.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul id="tt"></ul>
		 <form id="ff" method="post">
		 	
            <input type="text" name="parentId" id="parentId" value="" />
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'分类名称:',required:true">
            </div>
            
        </form>
        <div style="text-align:center;padding:5px 0">
        	<a href="javascript:void(0)" class="easyui-linkbutton" 
        		onclick="addRootnode()" style="width:80px">添加子节点</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" 
            onclick="addchildnode()" style="width:80px">添加根节点</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" 
            	onclick="addremovenode()" style="width:80px">删除</a>
        </div>
</body>
<script type="text/javascript">
	$('#tt').tree({
		method:"get",
		url:"http://localhost:3000/cate/list",
		onClick(node){
			
			$('#parentId').val(node._id);
			
		}
		
	});
	
		function addRootnode(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    
                    if($(this).form('enableValidation').form('validate')){
                    	var data = $('#ff').serializeObject();
                    	$.ajax({
                    		method:"post",
                    		url:"http://localhost:3000/cate/data",
                    		data:data
                    	}).done(function(res){
                    		$('#tt').tree("reload")
                    	});
                    }
                }
            });
        }
	
	function addchildnode(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    
                    if($(this).form('enableValidation').form('validate')){
                    	var data = $('#ff').serializeObject();
                    	//console.log($('#ff').serializeObject())
                    	delete data.parentId;
                    	$.ajax({
                    		method:"post",
                    		url:"http://localhost:3000/cate/data",
                    		data:data
                    	}).done(function(res){
                    		$('#tt').tree("reload")
                    	});
                    }
                }
            });
        }
	
	
	function addremovenode(){
           var node=$('#tt').tree('getSelected');
           console.log(node._id)
            $.ajax({
                url:"http://localhost:3000/cate/data/"+node._id,
                 method:"delete"

            }).done(function(res){
                $('#tt').tree("reload")
            })
    }
	
	
</script>
</html>